<template>
<div class="qu">
  <div class="sp">
    <span>当前数据刷新频率: <el-button round type="success" :loading="true">{{this.corn}}分钟/次</el-button></span>
 
 <el-button @click="shoudongshuxin()" class="bt" :disabled="dis" round type="info">手动刷新</el-button>
 
  </div>

     <el-divider></el-divider>

<el-dialog  title="抓拍图像" center :visible.sync="dialogTableVisible">
 <el-image
      style="width:100%; height: 100%"
      :src="src"
      ></el-image>
</el-dialog>


<el-dialog :visible.sync="dialogTableVisibleloading" :show-close="showClo" :close-on-click-modal="clo">
<div class="dia" v-loading="loading"
 :data="info  "
    element-loading-text="图像分析中，请耐心等待"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)" />
</el-dialog>

  <el-card v-for="(camrea,index) in camreaList" :key="index"  shadow="hover" class="box-card">
  <div slot="header" class="clearfix">
    <span>人数：{{camrea.peoplecount}}</span>
    <el-button @click="showphoto(camrea.image)" style="float: right; padding: 3px 0" type="text">详细信息</el-button>
  </div>
  <span class="dm">设备识别房间:</span> {{camrea.room}}
  <br/>
  <br/>
  <span class="dm">摄像头ip:</span> {{camrea.frontip}}
  <br/>
  <br/>
  <span class="dm">空调id:</span> {{camrea.deviceid}}
</el-card>
</div>
</template>
<script>
  import axios from 'axios'
export default {
data(){
    return{
       camreaList: [],
       dialogTableVisible:false,
       src:'',
       corn:'',
       dis:false,
       dialogTableVisibleloading:false,
       showClo:false,
       loading:true,
       clo:false,
       info:[]
    }
},
created(){
 this.search();
 this.searchcorn();
},
methods:{
 search(){
   axios.get(this.api + 'searchcount', {
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true,
        }).then(res => {
        this.camreaList=res.data
        })
} ,
showphoto(image){
    this.dialogTableVisible=true
this.src='data:image/jpeg;base64,' + image
    },
searchcorn(){
     axios.get(this.api + 'searchcorn', {
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true,
        }).then(res => {
        this.corn=res.data
        })
},

shoudongshuxin(){

 let self = this

self.dis=true
self.dialogTableVisibleloading=true
   $.ajax({
          type: 'POST',
          url: this.api + 'searchpeople',
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          xhrFields: {
            withCredentials: true
          },
          success: function (res) {
              self.dis=false
           self.dialogTableVisibleloading=false
           self.search();
          }
   })

}
}
}
</script>

<style>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 400px;
    margin: 20px;
float: left;
margin-top: 5px;
  }

  .dm{
      color: rgb(31, 96, 99);
      
  }
.sp{
   margin-left: 20px;
   margin-top: 20px;
   overflow: auto;
}
.bt{
    float: right;
    margin-right: 20px;
}
.dia{
    width: 100%;
    height: 300px;
}
.qu{
height: 100%;
overflow: auto;
}
</style>